<template>
	<view class="content">
		<image :src="headword" class="headword" mode="widthFix" lazy-load></image>
		<image :src="headIcon" class="headIcon" mode="widthFix" lazy-load></image>
		<view class="uni-flex-main" v-show="isShow">
			<view class="uni-flex-list uni-column" v-if="examState">
				<view class="flex-item uni-name" v-if="!isEmpty(itemObj)">{{itemObj.title}}</view>
				<view class="flex-item uni-time" v-if="!isEmpty(itemObj) && itemObj.condition==0">{{itemObj.timeStr}}</view>
				<view class="flex-item uni-time syu" v-if="!isEmpty(itemObj) && itemObj.condition==1 ">
					剩余时间:<uni-countdown :show-day="false" 
						:second="currTime" 
						@timeup="timeup" 
						class="countdown"
						:splitorColor="splitorColor"
						:colorSize="size"
						:color="color" v-if="itemObj.condition==1" />
				</view>
				<view class="flex-item uni-depInfo uni-top">
					<view class="uni-dep" v-if="!isEmpty(itemObj)">
						{{itemObj.name}}
					</view>
					<view class="uni-username" v-if="!isEmpty(itemObj)">
						{{itemObj.depName}}
					</view>
				</view>
				
				<view class="flex-item btn" v-if="!isEmpty(itemObj)">
					<button type="warn"  class="dobtn" @click="doStart" :loading="loading" :disabled="disabled">{{examBtn}}</button>
				</view>
			</view>
			<view class="uni-flex-list uni-column" v-if="!examState">
				<view class="flex-item uni-name" v-if="!isEmpty(itemObj)">{{itemObj.title}}</view>
				<view class="flex-item uni-time" v-if="!isEmpty(itemObj) && itemObj.condition==0">{{itemObj.timeStr}}</view>
				<view class="flex-item uni-depInfo uni-top">
					<view class="youScore">{{itemObj.scoreStr}}</view>
					<view class="uni-dep" v-if="!isEmpty(itemObj)">
						{{itemObj.name}}
					</view>
					<view class="uni-username" v-if="!isEmpty(itemObj)">
						{{itemObj.depName}}
					</view>
				</view>
				<view class="flex-item uni-time syu" v-if="!examState">
					
				</view>
				<view class="flex-item btn" v-if="!examState && itemObj.condition==2">
					<button type="warn"  class="dobtn" @click="doLookResult">查看考试结果</button>
				</view>
				<view class="flex-item btn" v-if="!examState && itemObj.condition==0">
					<button type="warn"  class="dobtn" @click="donotStart">考试暂未开始</button>
				</view>
			</view>
		</view>
		<!--规则-->
		<view class="exam-rule" v-if="!isEmpty(itemObj)">
			<view class="exam-rule-title" >考试规则</view>
			<view class="exam-rule-content" v-html="replaceAll(itemObj.regulation)">
				1、模板消息调用时主要需要模板ID和模板中各参数的赋值内容；<br/>
				2、模板中参数内容必须以".DATA"结尾，否则视为保留字；<br/>
				3、模板保留符号""。<br/>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('@/common/util.js')
	const request = require('@/common/request.js')
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				title: '集团制度考试',
				examName: '考试时间',
				examTime: '15：00 - 16：00',
				examBtn: '开始答题',
				examState: 1,    //0：还没有开始；1：答题继续。
				isShow: false,
				authKey: null,
				second: 3600,
				splitorColor:"#FB535A",
				color:"#FB535A",
				size:"16px",
				headIcon:'/static/illustration.png',
				headword:'/static/headword.png',
				loading:false,
				disabled:false,
				itemObj:null
			}
		},
		computed: {
			...mapState(['vote_url','currTime'])
		},
		onLoad(option) {
			//this.authKey = util.getParamsinfo('authKey');
			this.authKey = option.authKey
			//this.loadData()
		},
		onShow() {
			this.loadData()
		},
		methods: {
			async loadData() {
				let that = this;
				let url = this.vote_url;
				let authKey = !util.isEmpty(this.authKey) ? this.authKey : "";
				let opts = {url: url,method: "POST"};
				let param = {id: 2,method: "exam_homeindexdata",params: {
						authKey: authKey
					}
				}
				console.log(JSON.stringify(param))
				uni.showLoading({title: '正在加载......'})
				request.baseRequest(opts, param).then((res) => {
					console.log(JSON.stringify(res))
					that.itemObj = res
					that.$store.commit('setCurrTime',that.itemObj.time)
					that.$store.commit('setExamState',true)
					that.examState = that.itemObj.initiate
					console.log(that.currTime)
					if(that.examState==1 && that.itemObj.condition == 1){
						that.examBtn = "继续答题"
						that.examTime = "剩余时间："
					}
					that.isShow = true
					uni.hideLoading()
				},(error) => {
						console.log(error)
						that.isShow = true
						uni.hideLoading()
						uni.showToast({title: error.message, duration: 1500, mask: true, icon: "none"})
					}
				)
			},
			doStart(){
				let that = this;
				let url = this.vote_url;
				let authKey = !util.isEmpty(this.authKey) ? this.authKey : "";
				let opts = {url: url,method: "POST"};
				let param = {id: 2,method: "exam_startpascal",params: {
						authKey: authKey
					}
				}
				request.baseRequest(opts, param).then((res) => {
					//console.log(JSON.stringify(res))
					if(!util.isEmpty(res)){
						if(!res.initiate){
							uni.showModal({
								title: '提示',
								content: res.msg,
								confirmColor: '#000000',
								showCancel:false,
								success: function(res) {
									
								}
							});
						}else{
							uni.navigateTo({
								url:'/pages/beginans/beginans?authKey=' + this.authKey
							})
						}
					}
					
				},(error) => {
						uni.showToast({title: error.message, duration: 1500, mask: true, icon: "none"})
					}
				)
			},
			timeup(){
				//结束
				let that = this;
				let url = this.vote_url;
				let opts = {url: url,method: "POST"};
				let param = {id: 2,method: "exam_handpaper",params: {
						authKey: that.authKey,
						auto:1
					}
				}
				
				that.chooseType=-1
				uni.showLoading({title: '时间到...'})
				request.baseRequest(opts, param).then((ress) => {
					console.log(JSON.stringify(ress))
					if(!util.isEmpty(ress)){
						uni.showModal({
							title: '提示',
							content: ress.message,
							confirmColor: '#000000',
							showCancel:false,
							success: function(res) {
								if (res.confirm) {
									uni.redirectTo({
									    url: '/pages/beginans/handpaper?data='+JSON.stringify(ress)+"&authKey="+that.authKey
									});
								}
							}
						});
					}
					uni.hideLoading()
				},(error) => {
						//console.log(JSON.stringify(error))
						
						uni.showToast({title: error.message, duration: 1500, mask: true, icon: "none"})
					}
				)
				//提交
				console.log("提交")
			},
			isEmpty(value){
				return util.isEmpty(value);
			},
			doLookResult(){
				// uni.navigateTo({
				// 	url:'/pages/result/answerresult?authKey='+this.authKey
				// })
				let url = 'https://www.dalinicegroup.com/w/apppage/exam/answerresult/?authKey='+this.authKey
				location.href = url
			},
			donotStart(){
				if(!util.isEmpty(this.itemObj.msg)){
					uni.showToast({
						icon:'none',
						title:this.itemObj.msg,
						duration:3000
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'系统异常，请稍后在试',
						duration:3000
					})
				}
			},
			replaceAll(value){
				return util.replaceAll(value)
			}
			
		}
	}
</script>

<style lang="scss">
	%uni-flex {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	%uni-flex-inline {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.content {
		@extend %uni-flex;
		background: blue;
		min-height: 100%;
		background:url(../../static/bg.png) no-repeat;
		background-size: 100% 100%;
		justify-content: flex-start;

		.uni-flex-main {
			@extend %uni-flex;
			width: 80%;
			margin-top: 5%;
			background: #FFFFFF;
			border-radius: 20upx;
			padding:20upx;

			.uni-flex-list {
				@extend %uni-flex;
				width: 100%;

				.flex-item {
					@extend %uni-flex;
					min-width: 100%;
					&.uni-name{
						font-size: 40upx;
						font-weight:600;
					}
					&.uni-time{
						@extend %uni-flex;
						flex-direction: row;
						font-size: 28upx;
						color: rgb(150,150,150);
						font-weight: bold;
						&.syu{
							font-size: 36upx;
							color:#FB535A;
							font-weight: bold;
						}
					}
					&.uni-top{
						padding-top: 30upx;
						padding-bottom: 30upx;
					}
					&.uni-depInfo{
						@extend %uni-flex;
						.uni-username{
							font-weight: bold;
							font-size: 28upx;
						}
						.uni-dep{
							font-weight: bold;
							font-size: 28upx;
						}
						.youScore{
							font-size: 28upx;
							color: red;
							font-weight: bold;
						}
					}
					&.btn{
						padding-bottom: 20upx;
						.dobtn{
							width:80%;
							height:70upx;
							line-height: 66upx;
							font-size: 32upx;
							border-radius: 100upx;
							background-color: rgb(251, 82, 89) !important;
							box-shadow:0px 3px 10px #fb5259;
						}
					}
				}
			}
		}
		.exam-rule{
			@extend %uni-flex;
			width:100%;
			margin-top:50upx;
			justify-content: flex-start;
			align-items: flex-start;
			.exam-rule-title{
				flex: 1;
				padding-left:24upx;
				color: white;
				font-size: 32upx;
				font-weight: bold;
			}
			.exam-rule-content{
				flex: 1;
				padding-left:24upx;
				padding-right:24upx;
				color: white;
				font-size: 28upx;
				padding-bottom:20upx;
			}
		}
		.headIcon{
			width:479upx;
			height:302upx;
		}
		.headword{
			margin-top:5%;
			margin-bottom: 5%;
			width:451upx;
			height:166upx;
		}
	}
</style>
